<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #Test5 p{
            height:50px;
            width:100px;
            background: pink;
        }
    </style>
</head>
<body>
    <!-- 测试组件 -->
    <button>测试按钮1</button>
    <div>测试内容1</div>
    <br>
    <div>
        <button id = "testbtn2">测试按钮2</button>
        <p id = "test2">测试内容2</p>
    </div>
    <br>
    <div>
        <button id = "testbtn3">测试按钮3——图片1</button>
        <button id = "testbtn4">测试按钮4——图片2</button>
        <br>
        <img src = "./img_103.jpg" alt = "" id = "testimg" width = 300px>
    </div>
    <div id = "Test5">
        <p>测试内容5</p>
        <br>
        <button>测试按钮5</button>
    </div>
    
    <script>
        /*======innerText======*/
        //1 获取事件源
        var btn1 = document.querySelector('button');
        var div1 = document.querySelector('div');

        //2 注册事件
        btn1.onclick = function(){
            div1.innerText = '测试内容已改变';
        }
        
        /*======innerHTML======*/
        //1 获取事件源
        var btn2 = document.getElementById('testbtn2')
        var p2 = document.getElementById('test2');
        //2 注册事件
        btn2.onclick = function(){
            p2.innerHTML = '<strong>测试内容已改变</strong>';
        }

        /*======元素节点.属性======*/
        //1 获取事件源
        var btn3 = document.getElementById('testbtn3');
        var btn4 = document.getElementById('testbtn4');
        var img3  = document.getElementById('testimg');
        //2 注册事件
        btn3.onclick = function(){
            img3.src = './img_103.jpg';
        }
        btn4.onclick = function(){
            img3.src = './img_112.jpg';
        }

        /*======元素节点.style.样式======*/
        //1 获取事件源
        var btn5 = document.querySelector('#Test5 button');
        var p5 = document.querySelector('#Test5 p');
        //2 注册事件
        btn5.onclick = function(){
            p5.style.background = 'skyblue';
        }
    </script>
</body>
</html>